<template>
      <div class="browser">
            <i class="el-icon-setting" @click="setting = true"></i>
            <el-col :span="24" class="top">
                  <el-col :span="7" class="perchbox"></el-col>
                  <el-col :span="10">
                        <el-input placeholder="请输入搜索内容" v-model="searchValue" class="input-with-select" @keyup.enter.native="onsSearch">
                        <el-select v-model="engine" slot="prepend" placeholder="请选择">
                              <el-option v-for="item in searchEngine" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click.native="onsSearch"></el-button>
                        </el-input>
                  </el-col>
                  <el-col :span="7" class="perchbox"></el-col>
            </el-col>
            <el-col :span="24" class="bottom">
                  <el-col :span="6" v-for="(item1,index1) in menuList" :key="index1">
                        <el-col :span="24">{{item1.name}}</el-col>
                        <el-col :span="24">
                              <el-col :xs="6" :md="6" class="contact-item" v-for="(item2,index2) in item1.sites" :key="index2">
                                    <a :href="item2.link">
                                          <div class="contact-icon" @click="item2.click" >
                                                <img :src="item2.link+'/favicon.ico'" class="contact-img " />
                                          </div>
                                    </a>
                                    <p>{{item2.name}}</p>
                              </el-col>
                        </el-col>
                  </el-col>
                  
            </el-col>


            <!-- 设置抽屉 -->
            <el-drawer title="设置" :visible.sync="setting" direction="rtl" :before-close="settingClose">
                  <!-- ==================外观====================== -->
                  <el-col :span="24"><h4 class="setting-title">外观</h4></el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">主题颜色</el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-color-picker v-model="themeColor" @change="setThemeColor"></el-color-picker>
                        </el-col>
                  </el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">字体颜色</el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-color-picker v-model="fontColor" @change="setFontColor"></el-color-picker>
                        </el-col>
                  </el-col>
                  <!-- =========================搜索==================== -->
                  <el-col :span="24"><h4 class="setting-title">搜索</h4></el-col>
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">
                              首选搜索引擎
                        </el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-select v-model="engine" placeholder="请选择" @change="setSearchEngine">
                                    <el-option v-for="item in searchEngine" :key="item.value" :label="item.label" :value="item.value"></el-option>
                              </el-select>
                        </el-col>
                  </el-col>

                  <!-- =========================其他==================== -->
                  <el-col :span="24"><h4 class="setting-title">其他</h4></el-col>
                  
                  <el-col :span="24">
                        <el-col :span="12" class="setting-item-left">
                              恢复
                        </el-col>
                        <el-col :span="12" class="setting-item-right">
                              <el-button type="warning" plain @click.native="resetSetting">恢复默认</el-button>
                        </el-col>
                  </el-col>
            </el-drawer>
      </div>
</template>











<script>
export default {
      props: [],
      data() {
            return {
                  engine:'3',
                  searchValue:'',
                  href:['https://www.baidu.com/s?wd=','https://cn.bing.com/search?q=','https://kaifa.baidu.com/searchPage?wd=','https://so.csdn.net/so/search?q='],
                  setting:false,
                  themeColor:'#00D98F',
                  fontColor:'#FFFFFF',
                  searchEngine:[
                        {
                              value:'1',
                              label:'百度'
                        },
                        {
                              value:'2',
                              label:'必应'
                        },
                        {
                              value:'3',
                              label:'开发者搜索'
                        },
                        {
                              value:'4',
                              label:'CSDN搜索'
                        },
                  ],
                  menuList:[
                        {
                              name:'开发',
                              sites:[
                                    {
                                          name:'爱资料在线工具',
                                          link:'https://www.toolnb.com/'
                                    }
                              ]
                        }
                  ]
            }
      },
      methods:{
            initSetting(){
                  let themeColor=window.localStorage.getItem('--themeColor')||'#00D98F';
                  let fontColor=window.localStorage.getItem('--fontColor')||'#FFFFFF';
                  let firstSearchEngine=window.localStorage.getItem('firstSearchEngine')||'1';

                  document.documentElement.style.setProperty('--themeColor',themeColor);
                  document.documentElement.style.setProperty('--fontColor',fontColor);
                  this.engine=firstSearchEngine;
            },
            onsSearch(){
                  let link=this.href[parseInt(this.engine)-1]+this.searchValue;
                  window.location.href=link;
            },
            // 关闭设置
            settingClose(done){
                  done();     
            },

            /**恢复默认设置 */
            resetSetting(){
                  window.localStorage.clear();
                  this.initSetting();
            },
            // 设置主题颜色
            setThemeColor(){
                  window.localStorage.setItem("--themeColor",this.themeColor);
                  this.initSetting();
            },
            // 设置字体颜色
            setFontColor(){
                  window.localStorage.setItem("--fontColor",this.fontColor);
                  this.initSetting();
            },
            // 设置首选搜索引擎
            setSearchEngine(e){
                  window.localStorage.setItem("firstSearchEngine",e);
            }
      },
      mounted(){

            this.initSetting();
      }
};
</script>












<style lang="less" scope>
      :root{
            --themeColor:#00D98F;
            --fontColor:#FFFFFF;
      }
      .browser{
            position: relative;
            height: 100vh;
            .el-icon-setting{
                  position:absolute;
                  top: 5vh;
                  right: 5vh;
                  font-size: 25px;
            }
      }
      .el-icon-setting:hover{
            cursor:pointer;
      }
      .top{
            height: 25vh;
            padding-top: 8vh;
            .el-select{
                  background-color: var(--themeColor);
                  color: var(--fontColor);
                  .el-input {
                        width: 130px;
                  } 
                  .el-input .el-select__caret{
                        color: var(--fontColor);
                  }
            }
            .el-input-group__append{
                  background-color: var(--themeColor);
                  color: var(--fontColor);
            }
      }
      .bottom{
            height: 75vh;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
      }

      /**设置标题 */
      .setting-title{
            text-align: left;
            padding:30px 0 0 50px;
            color: var(--themeColor);
            letter-spacing: 10px;
      }
      /**设置左边 */
      .setting-item-left{
            line-height: 60px;
            text-align: right;
            padding-right: 10px;
      }
      .setting-item-right{
            line-height: 60px;
            text-align: left;
            padding-left: 10px;
            display: flex;
            align-items: center;
            height: 60px;
      }
      .contact-item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      /* 让元素垂直排列 这里就是让包含图片的div和文字垂直排列 */
      flex-direction: column;
      height: 140px;

      padding: 20px 20px;
      }
      .contact-item p{
      // 站点名称
      font-size: 8px;
      color: slategrey;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;  /* 设置行数 */
            -webkit-box-orient: vertical;

      }
      .contact-icon {
      /* 鼠标放上去变成小手 */
      cursor: pointer;
      /* 这里让图片在盒子里垂直+水平居中 */
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      /* 圆角属性 */
      border-radius: 20px;
      /* 盒子阴影 */
      box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
            -18px -18px 30px rgba(255, 255, 255, 1);
      /* 过渡时间 ease-out是指先快速 后慢速 */
      transition: all 0.2s ease-out;
      }
      .contact-icon:hover {
      /* inset 是内部阴影 默认是外部阴影outset */
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
            inset 18px 18px 30px rgba(0, 0, 0, 0.1),
            inset -18px -18px 30px rgba(255, 255, 255, 1);
      }
      .contact-icon:hover img {
      /* inset 是内部阴影 默认是外部阴影outset */
      width: 29px;
      }
      .contact-img {
      width: 30px;
      transition: all 0.2s ease-out;
      }
</style>